<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <style>
         .taps {
             width: 150px;
             border: 1px #ccc solid;
         } 
        .item {
             height: 30px;
             width: 49px;
             float: left;
             border-left: 1px #ccc solid;
             text-align: center;
             line-height: 30px;
         }
         .clearFix::after {
             content: '';
             display: block;
             clear: both;
         }
         .context {
             position: relative;
             width: 150px;
             height: 100px;
             border: 1px #ccc solid;
             border-top: none;
             /* text-align: center;
             line-height: 100px; */
         }
         .text {
             position: absolute;
             width: 150px;
             height: 100px;
             border-top: none;
             text-align: center;
             line-height: 100px;
             display: none;
         }
         .active {
             background: pink;
         }
         .show {
             display: block
         }
     </style>
</head>
<body>
    <div class="wrap">
        <div class="taps clearFix">
            <div class="item active">体育</div>
            <div class="item ">语文</div>
            <div class="item ">数学</div>
        </div>
        <div class="context">
              <div class="text show">
                    体育
              </div> 
              <div class="text">
                    语文
             </div>
             <div class="text">
                    数学
             </div>
        </div>
    </div>
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script>
       var tabs = document.querySelector('.taps');
       var items = document.getElementsByClassName("item");
       var texts = document.getElementsByClassName("text");
       tabs.addEventListener("click",function(e){
           if(e.target.classList.contains("item")){
                for(var i = 0; i < items.length; i++ ){
                   (function(){
                       console.log('items[i]');
                       console.log(items[i]);
                    if(e.target === items[i]){
                        e.target.classList.add("active"); 
                        texts[i].classList.add("show");
                    }else{
                        items[i].classList.remove("active");
                        texts[i].classList.remove("show");
                    }  
                   })(i)
                } 
           }  
       })
    </script>
</body>
</html>